﻿@{
    ViewData["Title"] = "设备类型设置";
    Layout = null;
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备类型设置</title>
    <style>
        .search-area {
            padding: 15px 10px;
            background-color: #fff;
            margin-bottom: 10px;
        }
        .search-item {
            display: inline-block;
            margin-right: 20px;
        }
        .search-label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 5px;
        }
        .search-input {
            display: inline-block;
            width: 200px;
        }
        .btn-area {
            display: inline-block;
        }
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>
<body>
    <!-- 搜索区域 -->
    <div class="search-area">
        <div class="search-item">
            <span class="search-label">类型名称：</span>
            <div class="search-input">
                <input type="text" id="subname" class="layui-input" placeholder="请输入设备类型名称">
            </div>
        </div>
        <div class="search-item">
            <span class="search-label">是否启用：</span>
            <div class="search-input">
                <select id="isdel" class="layui-select">
                    <option value="">选择是否启用</option>
                    <option value="0">是</option>
                    <option value="1">否</option>
                </select>
            </div>
        </div>
        <div class="btn-area">
            <button id="btnSearch" class="layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
            <button id="btnReset" class="layui-btn layui-btn-primary">
                <i class="layui-icon layui-icon-refresh"></i> 重置
            </button>
        </div>
    </div>

    <!-- 表格区域 -->
    <table id="dataTable" lay-filter="dataTable"></table>

    <!-- 操作按钮模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </script>

    <!-- 启用状态模板 -->
    <script type="text/html" id="enableTpl">
        {{#  if(d.isdel === 1){ }}
            否
        {{#  } else if(d.isdel === 0) { }}
            是
        {{#  } else { }}
            未知
        {{#  } }}
    </script>

    <script>
        layui.use(['table', 'form', 'layer', 'jquery'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            
            // 初始化表格
            table.render({
                elem: '#dataTable',
                url: "/Dvsubject/GetDvsubjectList",
                method: 'get',
                page: true,
                limits: [5, 7, 9, 10, 12],
                limit: 5,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                where: {
                    // 移除默认的筛选条件，确保初始加载显示全部数据
                },
                parseData: function(res){
                    try {
                        return {
                            "code": 0,
                            "msg": "",
                            "count": res.count || 0,
                            "data": res.data || []
                        };
                    } catch(e) {
                        console.error("解析数据异常:", e);
                        return {
                            "code": 1,
                            "msg": "数据解析异常",
                            "count": 0,
                            "data": []
                        };
                    }
                },
                error: function(res) {
                    console.log("请求错误:", res);
                    layer.msg("获取数据失败，请检查网络连接或联系管理员", {icon: 2});
                },
                cols: [[
                    {field: 'subcode', title: '设备类型编码', width: 150, sort: true},
                    {field: 'subname', title: '设备类型名称', width: 180},
                    {field: 'isdel', title: '是否启用', width: 100, templet: '#enableTpl'},
                    {field: 'subcontext', title: '备注', minWidth: 150},
                    {field: 'operation', title: '操作', width: 150, templet: '#operationTpl', fixed: 'right'}
                ]],
                text: {
                    none: '暂无数据'
                }
            });
            
            // 搜索按钮事件
            $('#btnSearch').click(function(){
                table.reload('dataTable', {
                    where: {
                        subname: $('#subname').val(),
                        isdel: $('#isdel').val()
                    },
                    page: {
                        curr: 1
                    }
                });
            });
            
            // 重置按钮事件
            $('#btnReset').click(function(){
                $('#subname').val('');
                $('#isdel').val('');
                table.reload('dataTable', {
                    where: {
                        subname: '',
                        isdel: ''
                    },
                    page: {
                        curr: 1
                    }
                });
            });
            
            // 工具条事件
            table.on('tool(dataTable)', function(obj){
                var data = obj.data;
                var layEvent = obj.event;
                
                if(layEvent === 'delete'){
                    // 删除
                    layer.confirm('确定删除此设备类型吗？', function(index){
                        $.ajax({
                            url: '@Url.Action("Delete", "Dvsubject")/' + data.Id,
                            type: 'POST',
                            success: function(res){
                                if(res.success){
                                    layer.msg('删除成功');
                                    table.reload('dataTable');
                                }else{
                                    layer.msg('删除失败：' + res.message);
                                }
                            },
                            error: function(){
                                layer.msg('服务器异常，请稍后再试');
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html> 